<script lang="ts" setup>
import { computed } from 'vue'
import { useAntdDesignTokens } from '@vben/hooks'
import { preferences, usePreferences } from '@vben/preferences'
import { App, ConfigProvider, theme } from 'ant-design-vue'
import { setIntervalMsg } from '#/utils/messge'
import { onMounted } from 'vue' 
import { antdLocale } from '#/locales'
import mp3 from './static/message.mp3'

defineOptions({ name: 'App' })
onMounted(() => {
    // setIntervalMsg()
})
const { isDark } = usePreferences()
const { tokens } = useAntdDesignTokens()

const tokenTheme = computed(() => {
    const algorithm = isDark.value ? [theme.darkAlgorithm] : [theme.defaultAlgorithm]

    // antd 紧凑模式算法
    if (preferences.app.compact) {
        algorithm.push(theme.compactAlgorithm)
    }

    return {
        algorithm,
        token: tokens
    }
})

</script>

<template>
    <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
        <App>
            <RouterView />
        <video style="width: 1px;height: 1px;position: absolute;opacity: 0;left: -1;" :src="mp3" controls autoplay></video>

        </App>
    </ConfigProvider>
</template>

<style lang="scss">
// :root {
//     // --sidebar: 0 75% 42% 1;
// }

// .dark[data-theme='rose'],
// [data-theme='rose'] .dark {
//   --sidebar: 0 75% 42%;
// }

.ant-tree .ant-tree-switcher {
    align-self: center !important;
}

.flex-important {
    display: flex !important;
}
</style>
